// 光缆纤芯详情
<template>
  <el-dialog
    v-el-drag-dialog="{updataFull, updataDialogWidth}"
    :fullscreen="isfullscreen"
    :title="title"
    :append-to-body="true"
    :visible="dialogVisible"
    class="port-dialog"
    :width="setDialogWidth('1120px')"
    @close="close"
  >
    <div class="flex justify-end segment-list-box bgColorStyle pt-10 pb-10 port-tip">
      <div
        v-for="i in dictList['PORT_STATUS']"
        :key="i.value"
        class="port-status-list mr-10"
        :class="'color-' + i.value.toLowerCase()"
      >
        {{ i.label }}
      </div>
    </div>
    <div id="fiber-content" style="height: 400px; overflow: auto">
      <div class="flex flex-wrap mt-20 pr-10">
        <div
          v-for="item in fiberList"
          :key="item.fiberId"
          class="flex align-center segment-list-box port"
        >
          <span class="port-name">{{ item.fiberName }}</span>
          <div
            class="topo-port port-id"
            :class="[
              `color-${item.status && item.status.toLowerCase()}`,
              { 'color-select': item.selected }
            ]"
            @mouseover="mouseEnter($event, item)"
            @mouseout="mouseLeave(item)"
          />
        </div>
      </div>
      <el-popover
        v-model="portPop"
        class="fiber-tooltip"
        placement="bottom"
        :style="popPosition"
      >
        <slot name="content" class="flex-1 flex-cloumn selected-port">
          <div>{{ $t('FIBER_CORE') }}：{{ selectedPortData && selectedPortData.fiberName }}</div>
          <div>{{ $t('SERVICE_NAME') }}：{{ !bizData ? $t('WITHOUT') : bizData.bizName }}</div>
          <div>{{ $t('SERVICE_CODE') }}：{{ !bizData ? $t('WITHOUT') : bizData.resourceCode }}</div>
        </slot>
      </el-popover>
    </div>
    <span slot="footer">
      <div>
        <el-button type="primary" @click="refresh">{{ $t('REFRESH') }}</el-button>
        <el-button type="primary" @click="close">{{ $t('CLOSE') }}</el-button>
      </div>
    </span>
  </el-dialog>
</template>
<script>
  import { mapGetters } from 'vuex'
  import CableFiberApi from '@/api/oen/CableFiberApi'
  import topoPositionApi from '@/api/oen/TopoPositionApi'
  import { deepClone } from '@/utils/common'
  export default {
    props: {
      dialogVisible: {
        type: Boolean,
        default: false
      },
      node: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        fiberList: [],
        selectedPortData: null,
        bizData: null,
        portPop: false,
        popPosition: {
          left: 0,
          top: 0
        },
        timer: null,
        title: '',
        cableData: {}
      }
    },
    computed: {
      ...mapGetters(['dictList'])

    },
    mounted() {
      this.cableData = deepClone(this.node)
      this.getCablePort()
      this.getTitle()
    },
    methods: {
      getTitle() {
        const cableData = this.cableData.cableList ? this.cableData.cableList.find(i => i.id === this.cableData.id) : this.cableData
        this.title = `${this.$t('OPTICAL_CABLE')}-${cableData.label}`
      },
      refresh() {
        this.getCablePort()
        this.selectedPortData = null
        this.bizData = null
        this.portPop = false
      },
      getCablePort() {
        this.fiberList = []
        CableFiberApi.listByCableId({ cableId: this.cableData.id })
          .then(res => {
            if (res && res.length) {
              this.fiberList = [...res]
            }
          })
          .catch(err => {
            console.log(err)
          })
      },
      mouseLeave(currentPort) {
        currentPort.selected = false
        this.portPop = false
        this.timer && clearTimeout(this.timer)
        this.selectedPortData = null
        this.timer = null
      },
      mouseEnter(event, currentPort) {
        this.timer = setTimeout(() => {
          this.portClick(event, currentPort)
        }, 100)
      },
      // 端口点击事件
      portClick(event, currentPort) {
        console.log('event', event)
        const body = document.body
        // console.log('body', body.clientWidth)
        const left = event.pageX + 200 > body.clientWidth ? body.clientWidth - 200 : event.pageX
        this.popPosition = {
          left: left + 'px',
          top: event.pageY + 2 + 'px'
        }
        this.bizData = null
        currentPort.selected = true
        this.getBizInfo(currentPort)
        this.selectedPortData = currentPort
        this.portPop = true
      },
      // 获取端口关联业务信息
      async getBizInfo(fiberData) {
        // 空闲和成端的端口不查
        if (fiberData.status === 'IDLE' || fiberData.status === 'CONN') return
        if (fiberData.bizData) {
          this.bizData = fiberData.bizData
          return
        }
        const res = await topoPositionApi
          .getBizByCableFiber({
            cableFiberId: fiberData.fiberId,
            hideLoading: true
          })
        this.bizData = res || null
        fiberData.bizData = deepClone(res) || null
      },
      close() {
        this.$emit('update:dialogVisible', false)
      }
    }
  }
</script>
<style lang="scss">
  .port {
    margin-top: 20px;
    &-face {
      min-width: 25px;
      display: inline-block;
    }
    &-name {
      min-width:60px;
      text-align: right;
      font-size: 12px;
      padding: 0 5px;
    }
    &-id {
      width: 26px;
      height: 26px;
      border-radius: 13px;
      border: 1px solid transparent;
      cursor: pointer;
    }

  }
  .fiber-tooltip {
      position: fixed;
      z-index: 3000;
      .el-popover {
       width: 200px;
      }
    }
</style>
